<template>
  <div class="admin-login">
    <h1 style="font-size: 54px; margin-bottom: 50px; margin-top: 50px">管理员登录</h1>
    <section class="login-form">
      <div class="form-container">
        <div class="form-content">
          <form @submit.prevent="doLogin">
            <div class="form-input">
              <label for="username">用户名</label>
              <input v-model="userLoginForm.username" type="text" id="username" name="username" placeholder="用户名" required />
            </div>
            <div class="form-input">
              <label for="password">密码</label>
              <input v-model="userLoginForm.password" type="password" id="password" name="password" placeholder="密码" required />
            </div>
            <div class="form-footer">
              <label class="remember-me">
                <input type="checkbox" /> 记住密码
              </label>
              <button type="submit" class="btn">登录</button>
            </div>
          </form>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "AdminLogin",
  data() {
    return {
      userLoginForm: {
        username: 'qet123',
        password: 'Qwc123988',
      },
    };
  },
  methods: {
    doLogin() {
      axios.post('http://localhost:8088/user/login', this.userLoginForm, { withCredentials: true })
          .then(response => {
            if (response.data.code !== 200) {
              alert("账号或密码错误");
            } else {
              this.$router.push('/userListAdmin');
            }
          })
          .catch(error => {
            alert("登录失败");
            console.error('登录失败', error);
          });
    }
  }
};
</script>

<style scoped>
.admin-login {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-form {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-container {
  width: 100%;
}

.form-content {
  display: flex;
  flex-direction: column;
}

.form-input {
  margin-bottom: 15px;
}

.form-input label {
  display: block;
  margin-bottom: 5px;
}

.form-input input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.remember-me {
  display: flex;
  align-items: center;
}

.remember-me input {
  margin-right: 5px;
}

.btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn:hover {
  background-color: #0056b3;
}
</style>
